Date format
Description
Specify the format that the user must use for entering date values. An optional time format can be specified. The time portion of the format string is separated from the date portion by '&&'.
Discussion
The Date format
The Date format can be one of the predefined formats:
- dd/MM/yy
- dd/MM/yyyy
- MM/dd/yy
- MM/dd/yy
- MM/dd/yyyy
- dd.MM.yy
- dd.MM.yyyy
- dd-MM-yy
- dd-MM-yyyy
- MM-dd-yy
- MM-dd-yyyy
- yyyy-MM-dd
- yyyy/MM/dd
- yyyy.MM.dd
- <cultureDateFormat>
The time format can be defined by selecting one of the pre-defined formats (using the Insert pre-defined format string link in the Time Format Codes dialog), or manually defined using time format codes. The following codes can be used:
- Format Code
- Description
- 0
Format element. Causes a time element - h, m, or s - to be returned with a leading zero.
- h
Hour
- m
Minute
- s
Second
- a
12 hour clock with 'a' or 'p' suffix
- am
12 hour clock with 'am' or 'pm' suffix
- A
12 hour clock with 'A' or 'P' suffix
- AM
12 hour clock with 'AM' or 'PM' suffix
- <cultureTimeFormat>
Uses the time format for the device's culture.
If you want to include a format code in the time string, it can be escaped using a backslash. For example:
\h
Using the Device Culture's Date and Time Format
You can specify that the date format, day names and month names for a component should be automatically selected based on the 'Accept-language' property in the request header when the browser makes a request. This makes it easier to build applications that seamlessly adapt based on the user's locale setting.
To use locale settings, set the date format to:
<cultureDateFormat>
If you also want to include time in the format, you can use the following:
<cultureDateFormat> <cultureTimeFormat>
You can also configure the day and month names to use the user's locale. See [Date picker - day names] and [Date picker - month names] to learn more.
See also Supporting Device Culture Codes and Setting the Date Format Based on the User's Locale.
Dynamically Setting the Date
If the date format you want to use is not listed, you can dynamically specify the date format at runtime using a special session variable:
session.__protected__clientSideDateFormat
The date is specified using the following date format codes:
- Format Code
- Description
- dd
Day.
- MM
Month.
- yy
Two-digit year format
- yyyy
Four-digit year format
For example, the following Xbasic will format to display like this: "2018 - 09 26"
context.session.__protected__clientSideDateFormat = "yyyy - MM dd"
The result is the date being rendered using the format "yyyy - MM dd" in any date picker:
To include a time format, use the "&&" followed by the desired time format. EG:
context.session.__protected__clientSideDateFormat = "yyyy - MM dd&&0h:0m"
Referencing the Date format in Control Format Expressions Using {dialog.clientSideDateFormat}
{dialog.clientSideDateFormat} is a special placeholder that gets replaced at runtime with the value of the UX component's Date format property. It can be referenced in the Display format for a control. For example:
time("{dialog.clientSideDateFormat}",<value>)
See Grid Component Date format to learn more.
See Also